<template>
  <div class="auditMember" id="auditMember">
    <a-tabs v-model:activeKey="tabActive" @change="changeTopTabs">
      <a-tab-pane :key="item.key" :tab="item.tab" v-for="item in paneList"> </a-tab-pane>
    </a-tabs>
    <!-- 所属模块部分 -->
    <section class="options">
      <span class="options_label">所属模块:</span>
      <div class="options_content">
        <span v-for="item in options" :key="item.value" :class="selectOption == item.value ? 'activeOption' : ''"
          @click="selectType(item)">{{ item.label }}</span>
      </div>
    </section>
    <!-- 表格展示部分 -->
    <baseTable :columns="columns_audit" :dataSource="configData.records" :rowSelection="1" :scroll="scroll"
      :isShowPagination="isShowPagination" :total="configData.total" @changePage="changePage" :pageSize="pageSize">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'oparation' && tabActive == 1">
          <a :class="{ disable: !btnPerm.includes('clickCheckAble') }" @click="auditRecord(record.id)">点击审核</a>
        </template>
        <template v-if="column.dataIndex === 'opDetail' && tabActive != 1">
          <a @click="auditRecord(record.id)">查看详情</a>
        </template>
      </template>
    </baseTable>

    <!-- 三员管理模态框 -->
    <base-modal :width="modAlProps.width" :isVisible="isVisible" :title="modAlProps.title" :buttons="buttons"
      @handleOk="buttonMessage" :cancleText="(tabActive == 1 ? '取消' : '关闭') && (formState.formState_redio = '')"
      @handleCancle="(isVisible = false) && (formState.formState_redio = '')" class="sensitive_modal">
      <template v-slot:body>
        <div>
          <a-form name="advanced_search" autoComplete="off" :model="formState" ref="basicFormRef">
            <span v-if="detailInfo" v-for="item in detailInfo?.split(',')" style="display: block">{{ item }}</span>
            <a-form-item label="选择状态:" :name="['formState_redio']" :rules="[formState.rule]" style="margin-bottom: 0"
              v-if="tabActive == 1">
              <a-radio-group v-model:value="formState.formState_redio">
                <a-radio value="1">审核通过</a-radio>
                <a-radio value="2">审核不通过</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-form>
        </div>
      </template>
    </base-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, reactive, nextTick } from "vue";
import request from "@/api/index";
import baseTable from "@/components/table/baseTable.vue";
import columns from "@/components/table/tableConfig/tableColumn/systemTableColumn";
import { useFixeWidth, styleWidth } from "@/hooks/useFixeWidth";
import baseModal from "@/components/modal/baseModal.vue";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { message } from "ant-design-vue";
import { useRoute } from "vue-router";
import {routerPerm} from '@/utils/common';

const checkNameForm = async (_rule: dataSourceType = {}, value: any, callback: any = () => { }) => {
  console.log(value, 'value')
  if (_rule.required) {
    if (value === '' || value === undefined) {
      return Promise.reject(`${_rule.message}`);
    } else {
      return Promise.resolve()
    }
  } else {
    return Promise.resolve()
  }
};
// interFace
interface dataSourceType {
  [propName: string]: any;
}
//data
const btnPerm = ref<any[]>([]);
let columns_audit = ref(JSON.parse(JSON.stringify(columns.threeMemberAudit)));
const tabActive = ref(1);
const paneList = ref([
  {
    key: 1,
    tab: "待审核",
  },
  {
    key: 2,
    tab: "审核通过",
  },
  {
    key: 3,
    tab: "审核不通过",
  },
]);
const options = ref([
  {
    label: "全部",
    value: "",
  },
  {
    label: "组织管理",
    value: 1,
  },
  {
    label: "用户管理",
    value: 2,
  },
  {
    label: "三员管理设置",
    value: 3,
  },
  {
    label: "站点管理",
    value: 4,
  },
  {
    label: "栏目管理",
    value: 5,
  },
  {
    label: "工作流",
    value: 6,
  },
]);

const selectOption = ref("");
//表格
let scroll: dataSourceType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const configData = reactive({
  records: [],
  total: "",
});
const isShowPagination = ref(true);
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(10);
// 模态框
const modAlProps: dataSourceType = reactive({
  width: "M",
  title: "三员审核",
});
const buttons = ref<dataSourceType[]>([
  {
    text: "保存",
    "html-type": "submit",
    keepAlive: true,
  },
]);
const isVisible = ref<Boolean>(false);
const formState = reactive<dataSourceType>({
  formState_redio: '',
  rule: {
    required: true,
    trigger: ["change"],
    message: '请选择审核方式！',
    validator: checkNameForm,
  },
})
const basicFormRef = ref();
const formState_redio = ref<string | number>(1);
const detailInfo = ref<string>("");
const editRecordId = ref<number | string>('');
const { query } = useRoute();

// onMounted
onMounted(() => {
  btnPerm.value = routerPerm()
  isInnerMsg()
  getThreeMermberList({});
});
//methods

//是否从站内信跳转过来
const isInnerMsg = () => {
  if (query.logId) {
    auditRecord(query.logId)
  }
}

const changeTopTabs = () => {
  if (tabActive.value != 1) {
    columns_audit.value = JSON.parse(JSON.stringify(columns.threeMemberAudited));
  } else {
    columns_audit.value = JSON.parse(JSON.stringify(columns.threeMemberAudit));
  }
  pageCurrent.value = 1;
  pageSize.value = 10;
  getThreeMermberList({});
};
const selectType = (item: dataSourceType) => {
  selectOption.value = item.value;
  pageCurrent.value = 1;
  pageSize.value = 10;
  getThreeMermberList({});
};

const buttonMessage = async (msg: dataSourceType) => {
  let data = {
    isPass: formState.formState_redio == 1 ? true : false,
    id: editRecordId.value,
    opDetail: detailInfo.value,
  };
  basicFormRef.value
    .validate()
    .then(() => {
      request.auditThreeMermberRecord(data).then((res: dataSourceType) => {
        if ((res.code == "00000 00000")) {
          message.success(res.message);
          isVisible.value = false;
          getThreeMermberList({});
        } else {
          message.error(res.message);
        }
      });
    })

};
// 获取审核表格数据
const getThreeMermberList = async (datas: dataSourceType) => {
  const data: dataSourceType = {
    pageNumber: datas.pageNumber || pageCurrent.value,
    pageSize: datas.pageSize || pageSize.value,
    auditStatus: tabActive.value,
  };
  selectOption.value ? (data.moduleType = selectOption.value) : "";
  const telData = (await request.getThreeMermberList(data)) || {};
  let reqData = telData;
  configData.total = reqData.total;
  configData.records = reqData.records;
  configData.records.map(
    (item: dataSourceType, index: number) =>
      (item.key = item.id) && (item.index = index + 1)
  );
  nextTick(() => {
    let obj = getTableScroll(74, "auditMember", 80);
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
};
//审核列表
const auditRecord = async (id: any) => {
  if(!btnPerm.value.includes('clickCheckAble')) return
  editRecordId.value = id;
  detailInfo.value = await request.getLogDetail({ logId: id });
  modAlProps.title = tabActive.value == 1 ? "三员审核" : "三员审核详情";
  if (tabActive.value == 1) {
    buttons.value = [
      {
        text: "保存",
        "html-type": "submit",
        keepAlive: true,
      },
    ];
  } else {
    buttons.value = [];
  }
  isVisible.value = true;
};
//获取列表详情
const auditDetail = async (record: dataSourceType) => {
  let data = {
    logid: record.id,
  };
  let req = await request.getActionDetail(data);
};
//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: dataSourceType = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
  getThreeMermberList(datas);
};
</script>

<style lang="less">
.auditMember {
  padding: 16px;
  background: #fff;
  height: calc(100% - 120px);

  .options {
    display: flex;
    padding: 16px 0;
    align-items: center;
    font-size: 14px;

    .options_label {
      margin-right: 12px;
    }

    .options_content {
      border: 1px solid var(--theme_button_bg_color, #1f6ded);
      display: flex;
      border-radius: 4px;

      span {
        padding: 4px 14px;
        color: #333;
        border-right: 1px solid var(--theme_button_bg_color, #1f6ded);
      }

      span:nth-last-of-type(1) {
        border-right: none;
      }

      span:hover {
        background: var(--theme_button_hover_bg_color, #4892fa);
        border-color: var(--theme_button_hover_bg_color, #4892fa);
        color: #fff;
      }

      .activeOption {
        color: #fff;
        background: var(--theme_button_bg_color, #1f6ded);
      }
    }
  }

  .ant-table-row {
    .ant-table-cell:nth-last-of-type(1) {
      text-align: right;
    }
  }
}
</style>
<style lang="scss" scoped>
.disable {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}
</style>
